<template>
  <!-- 批记录图片展示 Start -->
  <div class="png-box" @click="previewVisible = true">
    {{ item.JobItemName }}
    <div :class="[isShow ? 'img-box' : 'no-img-box']" v-if="isShow">
      <img :src="imgSrc" alt="" />
    </div>
    <span v-else>/</span>
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
      width="50%"
    >
      <img
        alt="网络链接失败"
        :class="[item.DataTypeIndex == 9 ? 'signature' : 'png']"
        :src="imgSrc"
        @wheel="handleWheel"
        :style="{ transform: `scale(${scale})` }"
      />
    </a-modal>
  </div>
  <!-- 批记录图片展示 End -->
</template>

<script>
import { downloadEnclosureHis } from "@/api/Common"; //下载图片
export default {
  props: ["item", "currentValue", "isTemplate"],
  data() {
    return {
      imgSrc: null, //图片链接
      previewVisible: false, //放大图片
      isShow: true, //是否有图片
      scale: 1, // 新增缩放比例
    };
  },
  methods: {
    //关闭查看图片
    handleCancel() {
      this.previewVisible = false;
      this.scale = 1; // 关闭时重置缩放
    },
    // 新增滚轮事件处理
    handleWheel(e) {
      e.preventDefault();
      const delta = e.deltaY > 0 ? 0.9 : 1.1;
      this.scale = Math.min(Math.max(0.5, this.scale * delta), 3);
    },
  },
  watch: {
    /* 监听是否有已经上传的文件,通过接口展示 */
    item: {
      async handler(newVal, oldVal) {
        if (newVal.SectionResultStr != null) {
          let res = await downloadEnclosureHis({
            relationTableId: newVal.JobRecordDetailID,
          });
          if (res.Data && res.Data.FilebyteStr != null) {
            this.isShow = true;
            this.imgSrc = `data:image/png;base64,${res.Data.FilebyteStr}`;
          } else {
            this.isShow = false;
            // this.imgSrc = require("@/assets/img/no-png.png");
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.png-box {
  overflow: hidden;
  .img-box {
    max-width: 8.125rem;
    max-height: 5.9375rem;
    overflow: hidden;
    padding: 2px;
  }
  .no-img-box {
    height: auto;
    width: auto;
  }

  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  .def-box {
    height: auto;
    width: auto;
  }
}
.signature,
.png {
  transform-origin: center center;
  transition: transform 0.1s;
}
.signature {
  height: 90% !important;
  width: 98% !important;
}

.png {
  width: 98%;
}

/deep/ .ant-modal-content {
  height: 34.4375rem;
  overflow: visible; /* 修改为可见溢出 */
  display: flex; /* 新增弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/deep/ .ant-modal-body {
  height: 34.4375rem;
  overflow: visible; /* 修改为可见溢出 */
  position: relative; /* 新增相对定位 */
  pointer-events: none; /* 允许穿透交互事件 */

  img {
    pointer-events: auto; /* 恢复图片事件响应 */
  }
}
.isHorizontal {
  transform: rotate(90deg);
}
</style>
